<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情 - 超市系统</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/product-ai.css">
    <script src="/js/jquery-1.12.4.min.js"></script>
</head>

<body>
    <main class="product-container" id="app">
        <!-- 商品主区域 -->
        <div class="product-main">
            <!-- 商品图片展示 -->
            <div class="product-gallery">
                <div class="main-image">
                    <img :src="product.image" :alt="product.name">
                </div>
            </div>
            
            <!-- 商品信息 -->
            <div class="product-details">
                <h1 class="product-title">{{ product.commodityName }}</h1>
                <div class="product-meta">
                    <div class="price-section">
                        <span class="price-label">价格：</span>
                        <span class="price-value">¥{{ product.commoditySalePrice }}</span>
                    </div>
                </div>
                
                <div class="product-description">
                    <h3 class="section-title">商品描述</h3>
                    <p>{{ product.commodityDescription }}</p>
                </div>
                
                <!-- <div class="product-specs">
                    <h3 class="section-title">商品规格</h3>
                    <div class="specs-list">
                        <div class="spec-item" v-for="spec in product.specs" :key="spec">{{ spec }}</div>
                    </div>
                </div> -->
                
                <div class="quantity-selector">
                    <h3 class="section-title">购买数量</h3>
                    <div class="quantity-control">
                        <button @click="decreaseQuantity">-</button>
                        <input type="number" v-model.number="quantity" min="1">
                        <button @click="increaseQuantity">+</button>
                    </div>
                </div>
                
                <div class="action-buttons">
                    <button class="btn-buy" @click="buyNow">直接购买</button>
                    <button class="btn-cart" @click="addToCart">加入购物车</button>
                </div>
            </div>
        </div>
        
        <!-- 商品评价区域 -->
        <section class="product-reviews">
            <h2 class="section-title">商品评价</h2>
            <div class="reviews-list">
                <div class="review-item" v-for="comment in comments" :key="comment.id">
                    <div class="review-header">
                        <span class="review-user">{{ comment }}</span>
                        <span class="review-date">{{ comment.date }}</span>
                    </div>
                    <div class="review-content">{{ comment.content }}</div>
                </div>
                <div v-if="comments.length === 0" class="no-reviews">暂无评论</div>
            </div>
        </section>

        <!-- 购物车成功提示弹窗 -->
        <div class="modal" v-if="showSuccessModal">
            <div class="modal-content success-modal">
                <div class="modal-body">
                    <div class="success-icon">✓</div>
                    <div class="success-message">成功加入购物车</div>
                    <button class="btn-modal" @click="goToCart">去购物车</button>
                </div>
            </div>
        </div>
    </main>

    <script src="/js/vue.js"></script>
    <script src="/js/product.js"></script>
</body>

</html>